<template>
    <el-form label-width="121">

        <el-form-item label="ID">
            <div class="detail">&nbsp;{{ customerDetail.id }}</div>
        </el-form-item>

        <el-form-item label="客户详情">
            <div class="detail">&nbsp;<router-link :to="'/dashboard/clue/' + customerDetail.clueId">查看客户详情</router-link>
            </div>
        </el-form-item>

        <el-form-item label="意向产品">
            <div class="detail">&nbsp;{{ customerDetail.intentionProductDo.name }}</div>
        </el-form-item>

        <el-form-item label="客户描述">
            <div class="detail">&nbsp;{{ customerDetail.description }}</div>
        </el-form-item>

        <el-form-item label="下次跟踪时间">
            <div class="detail">&nbsp;{{ customerDetail.nextContactTime }}</div>
        </el-form-item>

        <el-form-item label="跟踪记录" prop="noteContent">
            <el-input v-model="customerRemark.noteContent" style="padding-left: 0;" :rows="8" type="textarea"
                placeholder="请输入线索跟踪记录" />
        </el-form-item>

        <el-form-item label="跟踪方式" prop="noteWay">
            <el-select v-model="customerRemark.noteWay" placeholder="请选择跟踪方式" style="width: 100%;padding-left: 0;"
                clearable @click="loadDicValue('noteWay')">
                <el-option v-for="item in noteWayOptions" :key="item.id" :label="item.typeValue" :value="item.id" />
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="success" @click="customerRemarkSubmit(clueRemarkRuleFormRef)">提 交</el-button>
            <el-button type="primary" @click="createTran">创建交易</el-button>
            <el-button type="success" plain @click="goBack">返 回</el-button>
        </el-form-item>

        <el-form-item>
            <el-table :data="customerRemarkPageInfo.list" style="width: 100%" @selection-change="handSelection">
                <el-table-column type="index" label="序号" width="65" />
                <el-table-column property="noteContent" label="跟踪内容" />
                <el-table-column property="createTime" label="创建时间" />
                <el-table-column property="createByDO.name" label="创建人" />
                <el-table-column property="editTime" label="编辑时间" />
                <el-table-column property="editByDO.name" label="编辑人" />
                <el-table-column label="操作" width="110">
                    <template #default="scope">
                        <el-button type="primary" :icon="Edit" circle @click="edit(scope.row.id)" />
                        <el-button type="danger" :icon="Delete" circle @click="del(scope.row.id)" />
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next, jumper, total" :total="customerRemarkPageInfo.total"
                :page-size="customerRemarkPageInfo.pageSize" @change="toPage" />
        </el-form-item>
    </el-form>

    <!--创建交易的对话框-->
    <el-dialog v-model="tranDialogVisible" title="创建交易" width="45%" center>
        <el-form :model="tran" label-width="110">

            <el-form-item label="交易金额" prop="money">
                <el-input v-model="tran.money" style="padding-left: 0;" />
            </el-form-item>

            <el-form-item label="预计成交时间" prop="expectedDate">
                <el-date-picker style="width: 100%;" v-model="tran.expectedDate" type="datetime" placeholder="请选择预计成交时间"
                    value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>

            <el-form-item label="交易阶段" prop="stage">
                <el-select v-model="tran.stage" placeholder="请选择交易阶段" style="width: 100%;padding-left: 0;" clearable
                    @click="loadDicValue('stage')">
                    <el-option v-for="item in stageOptions" :key="item.id" :label="item.typeValue" :value="item.id"
                        :disabled="item.order > 1" />
                </el-select>
            </el-form-item>

            <el-form-item label="交易描述" prop="description">
                <el-input v-model="tran.description" style="padding-left: 0;" :rows="8" type="textarea"
                    placeholder="请输入交易描述" />
            </el-form-item>

            <el-form-item label="下次跟踪时间" prop="nextContactTime">
                <el-date-picker style="width: 100%;" v-model="tran.nextContactTime" type="datetime"
                    placeholder="请选择下次跟踪时间" value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="tranDialogVisible = false">关 闭</el-button>
                <el-button type="primary" @click="tranSubmit()">创 建</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { onMounted, ref, inject } from 'vue'
import { useRoute } from 'vue-router'
import { doGet } from '@/http/httpRequest'
import { showMessage } from '@/util/message'
import { doPost } from '../http/httpRequest'



const route = useRoute()
const customerId = route.params.customerId

const customerDetail = ref({
    intentionProductDo: {}
})
const customerRemarkPageInfo = ref([{}])

const customerRemark = ref({})

onMounted(() => {
    loadCustomerDetail()
})

//查询顾客详情
const loadCustomerDetail = async () => {
    let res = await doGet('/api/customer/' + customerId)
    if (res.data.code == 200) {
        customerDetail.value = res.data.info
    } else {
        showMessage("查询顾客详情失败", 'error')
    }
}


//交易弹窗
let tranDialogVisible = ref(false)

const createTran = () => {
    tranDialogVisible.value = true
}

let tran = ref({})


//查询交易阶段下拉框数据
let stageOptions = ref([])

const loadDicValue = async typeCode => {
    let res = await doGet('/api/dic/' + typeCode,{})
    if (res.data.code == 200) {
        stageOptions.value = res.data.info
    } else {
        showMessage("查询交易阶段下拉框数据失败", 'error')
    }
}


//交易提交
let flushPage = inject('flush')

const tranSubmit = async () => {
    let resp = await doPost('/api/tran',{
        customerId: customerId,
        money: tran.value.money,
        expectedDate: tran.value.expectedDate,
        stage: tran.value.stage,
        description: tran.value.description,
        nextContactTime: tran.value.nextContactTime,
    })
    if(resp.data.code == 200){
        showMessage("交易创建成功", 'success')
        flushPage()
    }else{
        showMessage("交易创建失败", 'error')
    }
}

</script>

<style scoped></style>